<template>
	<div class="app-container foSi14">
		<div class="dis" style="justify-content: flex-end;">
			<el-button type="primary" class="bac6b7" size="small" @click="add_show = true">新增教室</el-button>
		</div>
		<el-table key="table0" v-loading="listLoading" :data="list" stripe style="width: 100%"
			:row-style="{ background: '#f2f2f2' }">
			<el-table-column label="教室名称" width="200px">
				<template slot-scope="{row}">
					<span style="height:30px; line-height: 30px;">{{ row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column label="容纳人数">
				<template slot-scope="{row}">
					<span>{{ row.people_num }}</span>
				</template>
			</el-table-column>
			<el-table-column label="适用课程类型">
				<template slot-scope="{row}">
					<span v-if="row.type_id.indexOf(item.id) !== -1" v-for="(item, index) in courseList"
						:key="index">{{item.name}} </span>
				</template>
			</el-table-column>

			<el-table-column align="center" label="操作">
				<template slot-scope="{row}">
					<!-- <router-link :to="'/example/edit/'+scope.row.id"> -->
					<el-button type="primary" class="bac6b7" size="small" icon="el-icon-edit" @click="update(row.id)">
						编辑
					</el-button>
					<el-button type="primary" class="bac6b7" size="small" icon="el-icon-edit" @click="del(row.id)">
						删除
					</el-button>
					<!-- </router-link> -->
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />
		<div v-if="add_show || update_show" class="m-dialog-bg" />
		<div v-if="add_show" id="dialogBox" class="m-dialog-box fade-in"
			style="width: 962px; top: 259px; margin-left: -481px;">
			<div class="dialog-content">
				<div class="dialog-content-header">
					<span class="dialog-title">新增教室</span>
					<span class="dialog-close js-dialog_close" @click="open()" />
				</div>
				<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
					<div class="dialog-content-main">
						<div class="dialog-main-field flex-edit-box">
							<div class="dialog-field field-box clear">
								<div class="item clear">
									<label class="fl space-mr15 label">所属场馆</label>
									<span class="fl">{{ venue?venue.name:'' }}</span>
								</div>
							</div>
							<div class="dialog-field field-box clear">
								<div class="item-l">
									<label class="fl label"><span style="color:red;">*</span> 教室名称</label>
									<el-form-item prop="name" class="mp0">
										<el-input class="fr" v-model="ruleForm.name" style="width: 230px;"
											placeholder="请输入教室名称(1~15个字符)" />
									</el-form-item>
								</div>
								<div class="item-r">
									<label class="fl label"><span style="color:red;">*</span> 容纳人数</label>
									<el-form-item prop="number" class="mp0">
										<el-input class="fr" v-model="ruleForm.number" style="width: 140px;"
											placeholder="请输入容纳人数" />
									</el-form-item>
								</div>
							</div>
							<div class="dialog-field field-box clear">
								<div class="item clear">
									<label class="fl label" style="width: 160px;"><span style="color:red;">*</span>
										适用课程类型</label>
									<el-form-item class="dis disJuB wid100 mp0">
										<el-checkbox-group v-model="ruleForm.checkedList" size="medium"
											style="width: 560px;">
											<el-checkbox v-for="(item,index) in courseList" :key="index"
												:label="item.id">{{item.name}}</el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</div>
							</div>
						</div>
					</div>
				</el-form>
				<div class="dialog-content-footer">
					<el-button type="primary" class="bac6b7" @click="submitForm('ruleForm')">保存</el-button>
					<el-button type="info" @click="open()">取消</el-button>
				</div>
			</div>
		</div>
		<div v-if="update_show" id="dialogBox" class="m-dialog-box fade-in"
			style="width: 962px; top: 259px; margin-left: -481px;">
			<div class="dialog-content">
				<div class="dialog-content-header">
					<span class="dialog-title">编辑教室</span>
					<span class="dialog-close js-dialog_close" @click="open()" />
				</div>
				<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
					<div class="dialog-content-main">
						<div class="dialog-main-field flex-edit-box">
							<div class="dialog-field field-box clear">
								<div class="item clear">
									<label class="fl space-mr15 label">所属场馆</label>
									<span class="fl">{{ venue?venue.name:'' }}</span>
								</div>
							</div>
							<div class="dialog-field field-box clear">
								<div class="item-l">
									<label class="fl label"><span style="color:red;">*</span> 教室名称</label>
									<el-form-item prop="name" class="mp0">
										<el-input class="fr" v-model="ruleForm.name" style="width: 230px;"
											placeholder="请输入教室名称(1~15个字符)" />
									</el-form-item>
								</div>
								<div class="item-r">
									<label class="fl label"><span style="color:red;">*</span> 容纳人数</label>
									<el-form-item prop="number" class="mp0">
										<el-input class="fr" v-model="ruleForm.number" style="width: 140px;"
											placeholder="请输入容纳人数" />
									</el-form-item>
								</div>
							</div>
							<div class="dialog-field field-box clear">
								<div class="item clear">
									<label class="fl label" style="width: 160px;"><span style="color:red;">*</span>
										适用课程类型</label>
									<el-form-item class="dis disJuB wid100 mp0">
										<el-checkbox-group v-model="ruleForm.checkedList" size="medium"
											style="width: 560px;">
											<el-checkbox v-for="(item,index) in courseList" :key="index"
												:label="item.id">{{item.name}}</el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</div>
							</div>
						</div>
					</div>
				</el-form>
				<div class="dialog-content-footer">
					<el-button type="primary" class="bac6b7" @click="submitForm('ruleForm')">保存</el-button>
					<el-button type="info" @click="open('update')">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	import Pagination from '@/components/Pagination'
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		classroomLists,
		classroomAddEdit,
		classroomDels,
		classroomDetails
	} from '@/api/staff'; // Secondary package based on el-pagination
	export default {
		name: 'classroom',
		components: {
			Pagination
		},
		data() {
			const valName = (rule, value, callback) => {
				var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
				if (value.length < 0 || value.length > 15) {
					callback(new Error('请输入1~15个字符的教室名称'))
				} else {
					callback()
				}
			}
			const valNumber = (rule, value, callback) => {
				if (!parseFloat(value) || value % 1 !== 0 || value < 0) {
					callback(new Error('请输入整数'))
				} else {
					callback()
				}
			}
			const valChecked = (rule, value, callback) => {
				if (this.fuleForm.checkedList.length <= 0) {
					callback(new Error('请选择课程类型'))
				} else {
					callback()
				}
			}
			return {
				list: null,
				total: 0,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 10
				},
				courseList: [{
						id: '1',
						name: "团课"
					}, {
						id: '2',
						name: "精品课"
					},
					{
						id: '3',
						name: "私教课"
					}, {
						id: '4',
						name: "班课"
					}
				],
				add_show: false,
				update_show: false,
				classroom: '私教A室',
				classroom_size: 3,
				ruleForm: {
					id: '',
					name: '',
					number: '',
					checkedList: []
				},
				rules: {
					name: [{
						required: true,
						validator: valName,
						trigger: 'blur'
					}],
					number: [{
						required: true,
						validator: valNumber,
						trigger: 'blur'
					}],
					checkedList: [{
						required: true,
						trigger: 'change',
						validator: valChecked
					}],
				},
				venue: ''

			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var venue = localStorage.getItem('venue')
			if (venue) {
				this.venue = JSON.parse(venue)
			}
			var xuanList = [{
				name: '教室管理',
				url: '/venue/classroom',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			del(id) {
				console.log(id)
				this.$confirm('确认删除该教室？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					classroomDels({
						'id': id
					}).then(response => {
						this.getList()
					}).catch(error => {
						console.log(error)
						this.listLoading = false
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			update(id) {
				classroomDetails({
					'id': id
				}).then(response => {
					const {
						data
					} = response
					this.ruleForm = {
						id: id,
						name: data.name,
						number: data.people_num,
						checkedList: data.type_id.split(",")
					}
					this.update_show = true
				}).catch(error => {
					console.log(error)
				})
			},
			getList() {
				this.add_show = false
				this.update_show = false
				this.ruleForm = {
					id: '',
					name: '',
					number: '',
					checkedList: []
				}
				this.listLoading = true
				classroomLists({
					'page': this.listQuery.page,
					'limit': this.listQuery.limit
				}).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.total = data.total
					this.list = data.data
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						classroomAddEdit({
							'id': this.ruleForm.id,
							'name': this.ruleForm.name,
							'people_num': this.ruleForm.number,
							'type_id': this.ruleForm.checkedList.join(','),
						}).then(response => {
							this.getList()
						}).catch(error => {
							console.log(error)
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			open() {
				this.ruleForm = {
					id: '',
					name: '',
					number: '',
					checkedList: []
				}
				this.add_show = false
				this.update_show = false
			}
		}
	}
</script>

<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}

	.typelists {
		cursor: pointer;
		margin-right: 30px;
		margin-bottom: 10px;
		vertical-align: middle;
		font-size: 12px;
	}

	.typexuan {
		color: #41c3a8;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
		background-color: #616b74
	} */

	.m-dialog-bg {
		position: fixed;
		z-index: 1000;
		background: rgba(0, 0, 0, .4);
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.m-dialog-box {
		position: absolute;
		width: 962px;
		left: 50%;
		top: 50%;
		margin-left: -480px;
		z-index: 1200;
		opacity: 0;
		transition: all .2s ease-in-out;
	}

	.fade-in {
		opacity: 1;
	}

	.dialog-content {
		background: #ffffff;
		border-radius: 10px;
	}

	.dialog-content .dialog-content-header {
		position: relative;
		padding: 30px 0 10px;
		font-size: 20px;
		line-height: 20px;
		border-bottom: 1px solid #d9d9d9;
		margin: 0 60px;
		font-weight: 700;
	}

	.dialog-content .dialog-content-main {
		padding: 20px 60px;
	}

	.dialog-content .dialog-content-footer {
		padding: 20px 30px 40px;
		text-align: center;
	}

	.dialog-content .dialog-content-header .dialog-close {
		position: absolute;
		right: 0;
		top: 28px;
		width: 24px;
		height: 24px;
		background: url(../../../public/img/close.svg) no-repeat 0 0;
		background-size: 24px 24px;
		cursor: pointer;
	}

	.flex-edit-box {
		position: relative;
	}

	.flex-edit-box .field-box {
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.clear {
		zoom: 1;
	}

	.flex-edit-box .field-box .item {
		padding: 5px 15px;
	}

	.space-mr15 {
		margin-right: 15px;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.flex-edit-box .field-box .item-l {
		border-right: 2px solid #ffffff;
	}

	.flex-edit-box .field-box .item-l,
	.flex-edit-box .field-box .item-r {
		float: left;
		width: 50%;
		padding: 5px 15px;
		box-sizing: border-box;
	}

	.flex-edit-box .field-box .item-l,
	.flex-edit-box .field-box .item-r {
		float: left;
		width: 50%;
		padding: 5px 15px;
		box-sizing: border-box;
	}

	.space-mr40 {
		margin-right: 40px;
	}
</style>
